<template>
	<view class="home-wrap">
		<SubNavigation title="联络站详情" :tabs='tabs' :currentTab="tabKey" @tabChange="tabClick" />
		<view class="title">
			广州市从化区吕田镇人大代表中心联络站
		</view>
		<view class="home-content">
			<Hhgg v-if="tabKey == 0" />
			<Yjzj v-if="tabKey == 1" />
			<Zzdb v-if="tabKey == 2" />
			<Mycl v-if="tabKey == 3" />
			<Splx v-if="tabKey == 4" />
			<Jcxx v-if="tabKey == 5" />
		</view>
	</view>
</template>

<script>
	import SubNavigation from '@/components/SubNavigation.vue';
	import Hhgg from './components/hhgg.vue'
	import Yjzj from './components/yjzj.vue'
	import Zzdb from './components/zzdb.vue'
	import Mycl from './components/mycl.vue'
	import Splx from './components/splx.vue'
	import Jcxx from './components/jcxx.vue'

	export default {
		components: {
			SubNavigation,
			Hhgg,
			Yjzj,
			Zzdb,
			Mycl,
			Splx,
			Jcxx
		},
		data() {
			return {
				tabKey: 0,
				tabs: ['活动公告', '意见征集', '驻站代表', '民意处理', '视屏连线','基础信息']
			};
		},
		methods: {
			tabClick(val) {
				this.tabKey = val;
				// 可选择跳转页面或更新内容
			}
		}
	};
</script>

<style scoped lang="scss">
	.home-wrap {
		.title {
			padding-left: 36rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #F7F7F7;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #F22C1F;
		}

	}
</style>